<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/html-01.css"/>
        <style type="text/css">
            p {
                margin-left: 40px;
            }
        </style>

        <!--<style type="text/css">-->
            <!--@import "../css/html-01.css";-->
        <!--</style>-->
    </head>
    <body bgcolor="#7fffd4" style="background: #99ff99">
        <p>新的样式都在style里边设置，之前的直接设置bgcolor的方法已淘汰</p>

        <a name="tips">我是跳转的name</a>
        <br/>

        <h1 align="center">我是第一个标题</h1>
        <hr/>
        <h2 align="center">我是第二个标题</h2>
        <h3 align="center">我是第三个标题</h3>
        <p>我是第一个段落</p>

        <a href="http://www.baidu.com">百度</a>
        <br/>

        <p style="font-family: Verdana,serif;color: red">设置颜色字体</p>

        <p style="font-family: Times,serif;color: green;font-size: 20px">设置颜色字号，p标签后自带换行</p>

        <b>粗体字</b>
        <br/>

        <p style="font-size: large">大字体</p>

        <em>着重字</em>
        <br/>

        <i>斜体字</i>
        <br/>

        <small>小号字</small>
        <br/>

        <strong>加重语气</strong>
        <br/>

        <sub>下标字</sub>
        <br/>

        <sup>上标字</sup>
        <br/>

        <ins>插入字</ins>
        <br/>

        <p>q标签会为字加双引号<q>比如这样</q></p>

        <p>浏览器会对blockquote标签的文字进行缩进处理,如果在中间会换行</p>

        <blockquote>缩进的字</blockquote>

        <p>abbr标签可以设置缩略词，比如：<abbr title="World Health Organization">WHO</abbr></p>

        <p>dfn标签可以设置缩略词，但是要和title一起使用，显示出来是斜体，比如：<dfn title="World Health Organization">WHO</dfn></p>

        <p>address标签一般定义地址，一般都以斜体展示，比如</p>

        <address>
            北京市<br/>
            海淀区
        </address>

        <p>cite会以斜体显示著作权</p>

        <p><cite>fzzz</cite>写的这些</p>

        <p>bdo标签可以通过设置dir="rtl",使字体反着显示</p>

        <bdo dir="rtl">bdo标签可以通过设置dir="rtl",使字体反着显示</bdo>

        <p>samp标签可以在页面中，显示代码级的字体</p>

        <p>
            demo.example.com login: Apr 12 09:10:17
            Linux 2.6.10-gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-v6.189
        </p>

        <samp>
            demo.example.com login: Apr 12 09:10:17
            Linux 2.6.10-gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-v6.189
        </samp>

        <p>code标签可以显示json数据,但是不会显示空行和折行</p>

        <code>
            var person = {
            firstName:"Bill",
            lastName:"Gates",
            age:50,
            eyeColor:"blue"
            }
        </code>
        <p>如果要显示json的格式，则需要在code里添加pre标签</p>

        <code>
            <pre>
                var person = {
                    firstName:"Bill",
                    lastName:"Gates",
                    age:50,
                    eyeColor:"blue"
                }
            </pre>
        </code>
        <br/>
        <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
        <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

        <a href="#tips">跳转到name</a>
        <p>a标签定义一个name，可以用href="#"的方式直接跳转到name</p>

        <img src="../image/1.png">
        <br/>
        <img src="../image/dong.gif" alt="loading...">

    </body>
</html>